"use client"
import { Tabs, Mask } from 'antd-mobile'
import { useState, useEffect} from 'react'
import dayjs from 'dayjs'
import { cFetch } from '@/lib/Http'
import BillList from '@/components/pageComponents/home/billPage/BillList'
import {useItemStore, ItemStore} from '@/store/useItemStore'
import CustomTimeCard from '@/components/pageComponents/home/common/CustomTimeCard'
export default function(){
  const [activeKey, setActiveKey] = useState('curMonth')
  const [balance, setBalance] = useState({
    income: 0,
    expenses: 0,
    balance: 0
  })
  const [curMonthDate, setCurMonthDate] = useState({
    happened_after: dayjs().startOf('month').format('YYYY-MM-DD'),
    happened_before: dayjs().endOf('month').format('YYYY-MM-DD')
  })
  const [lastMonthDate, setLastMonthDate] = useState({
    happened_after: dayjs().subtract(1, 'month').startOf('month').format('YYYY-MM-DD'),
    happened_before: dayjs().subtract(1, 'month').endOf('month').format('YYYY-MM-DD')
  })
  const [curYearDate, setCurYearDate] = useState({
    happened_after: dayjs().startOf('year').format('YYYY-MM-DD'),
    happened_before: dayjs().endOf('year').format('YYYY-MM-DD')
  })
  const [customDate, setCustomDate] = useState<ItemListDateParam>({
    happened_after: '',
    happened_before: ''
  })
  const fetchItemsBalance = async (dateObj: Record<string, string>) => {
    const response = await cFetch.get<Record<string,any>>('/item/list/balance', dateObj)
    setBalance(response.resource)
  }
  const {fetchFirstPage,curMonthStore,lastMonthStore,curYearStore,customStore} = useItemStore() as ItemStore;
  useEffect(() => {
    fetchItemsBalance(curMonthDate)
    fetchFirstPage('curMonthStore', curMonthDate.happened_after, curMonthDate.happened_before)
  },[])
  const getCustomDate = (obj: ItemListDateParam) => {
    setCustomDate(obj)
    fetchItemsBalance(obj)
    fetchFirstPage('customStore', obj.happened_after, obj.happened_before)
    setVisible(false)
  }
  const beforeTabChange = (key: string) => {
    if(key === 'curMonth'){
      const len = curMonthStore.items.length
      if(len === 0){
        fetchFirstPage('curMonthStore', curMonthDate.happened_after, curMonthDate.happened_before)
      }
      setActiveKey(key)
    }else if(key === 'lastMonth'){
      const len = lastMonthStore.items.length
      if(len === 0){
        fetchFirstPage('lastMonthStore', lastMonthDate.happened_after, lastMonthDate.happened_before)
      }
      setActiveKey(key)
    }else if(key === 'curYear'){
      const len = curYearStore.items.length
      if(len === 0){
        fetchFirstPage('curYearStore', curYearDate.happened_after, curYearDate.happened_before)
      }
      setActiveKey(key)
    }else{
      setActiveKey(key)
      setVisible(true)
    }
  }
  const [visible, setVisible] = useState(false)
  return <div className="h-full">
    <Tabs activeKey={activeKey} onChange={beforeTabChange} className="fullHeight">
      <Tabs.Tab title='本月' key='curMonth'>
        <BillList storeDate={curMonthStore} dateParam={curMonthDate} balance={balance} storeType='curMonthStore'/>
      </Tabs.Tab>
      <Tabs.Tab title='上月' key='lastMonth'>
        <BillList storeDate={lastMonthStore} dateParam={lastMonthDate} balance={balance} storeType='lastMonthStore'/>
      </Tabs.Tab>
      <Tabs.Tab title='今年' key='curYear'>
        <BillList storeDate={curYearStore} dateParam={curYearDate} balance={balance} storeType='curYearStore'/>
      </Tabs.Tab>
      <Tabs.Tab title={ <span onClick={()=>setVisible(true)}>自定义时间</span> } key='custom'>
        <BillList storeDate={customStore} dateParam={customDate} balance={balance} storeType='customStore'/>
      </Tabs.Tab>
    </Tabs>
    <Mask visible={visible} onMaskClick={() => setVisible(false)}>
      <CustomTimeCard cancel={()=>setVisible(false)} sendDateForm={getCustomDate}/>
    </Mask>
  </div>
}